<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>PetStore Management</title>
<!--    <link rel="Stylesheet" href="../css/jpetstore.css" type="text/css" media="screen"/>-->
    <script th:src="@{../js/jquery-3.6.0.min.js}"></script>
</head>
<style>
    *{
        padding: 0px;
        margin: 0px;
    }
    #Content {
        width: 100%;
        height: 80ex;
        color: #333;
        background-color: rgba(256,256,256,0.5);
        border-width: 0;
        position: relative;
        overflow: hidden;

    }
    a{
        display: block;
        text-decoration: none;
        color: #eaac00;
        font-weight: bold;
    }
    .Returnto{
        display: inline-block;
        float: left;
        position: absolute;
        top: 1ex;
        left: 2ex;
        height: 5ex;
        width: 50ex;
        background-image: url("../image/ReturntoManagementMainMenu.png");
        background-size: 100%;
        background-repeat: no-repeat;
        border-color: #eaac00;
        border-width: 0.4ex;
        border-style: solid;
    }
    table{
        display: block;
        /*position: absolute;*/
        /*top: 10ex;*/
        /*left: 10ex;*/
        margin-top: 10%;
        margin-left: 32%;
        width: 45ex;
        font-size: 3ex;
        background-color: #ffffff;
        border-color: #56832c;
        border-width: 1ex;
        border-style: solid;
        margin-bottom: 10ex;
    }
    table tr{
        height: 3ex;
        text-align: left;
    }
    table td{
        width: 10ex;
    }
    h2{

        float: left;
        position: absolute;
        top: 1ex;
        left: 8ex;
        font-size: 5ex;
    }
    input {
        float: left;
        position: absolute;
        border-width: .3ex .3ex .3ex .3ex;
        border-style: solid;
        border-color: #eaac00;
        background-color: #ffffff;
        color: #eaac00;
        height: 3ex;
        font-size: 3ex;
    }
    label{
        display: inline-block;
        float: left;
        position: absolute;
        font-size: 3ex;
    }
    #Catalog{
        width: 75ex;
        height: 60ex;
        background-color: #ffffff;
        margin-top: 9ex;
        margin-bottom: 1ex;
        margin-left: 30%;
        position: relative;
        border-color: #56832c;
        border-width: 1ex;
        border-style: solid;
    }
    .return{
        display: inline-block;
        float: left;
        margin-left: -38ex;
        margin-top: 33ex;
        margin-bottom: 3ex;
        width: 10ex;
        height: 3ex;
        background-image: url("../image/RETURN2.png");
        background-size: 100%;
        background-repeat: no-repeat;
        border-color: #eaac00;
        border-width: 0.4ex;
        border-style: solid;
    }

    #save{
        background-image: url("../image/SAVE.png");
        background-size: 100%;
        background-repeat: no-repeat;
        width: 12ex;
        margin-top: 2ex;
        margin-left: 6ex;
    }

</style>
<body>
<div th:replace="manageCommon/managetop"></div>
<div id="Content">
    <a class="Returnto" href="/manage/main"></a>
    <div th:replace="petmanagement/topSearch"></div>
    <div id="Catalog">
        <h2>Product Edit</h2>
        <form action="/manage/saveProduct" method="post" id="editProduct" enctype ="multipart/form-data">
            <label style="left: 7ex;top: 7ex ">Product ID: </label>
            <input style="left: 19ex;top: 6ex ;width: 15ex" type="text" id="productid" name="productid" th:value="${session.selectedProduct.productId}" /><br/>
            <label style="left: 5.8ex;top: 12ex ">Category ID: </label>
            <input style="left: 19ex;top: 12ex ;width: 15ex" id="categoryid" list="cateid" name="categoryIdSelect" /><br/>
            <datalist id="cateid" >
                <option th:each="categoryid:${session.allcategoryId}" th:text="${categoryid}" th:value="${categoryid}"></option>
            </datalist>
            <label style="left: 3.5ex;top: 18ex ">Product Name: </label>
            <input style="left: 19ex;top: 18ex;width: 20ex" type="text" th:value="${session.selectedProduct.name}" name="name"/><br/>
            <label style="left: 1ex;top: 23ex;width: 20ex">Product Image: </label>
            <input  style="left: 19ex;top: 23ex;width: 20ex" type="file" id="imagepath" name="imagepath"><br/>
            <label style="left: 1ex;top: 28ex;width: 20ex">Description: </label>
            <input style="left: 19ex;top: 27.5ex;width: 20ex" type="text" id="descript" name="descript"/><br/>
            <input style="color:rgba(256,256,256,0) ; left: 14ex;top: 31ex;width: 10ex;height: 4ex"  type="submit"  id="save">
        </form>
        <input  class="return" type="button"  th:onclick="backProduct('[[${session.categoryNow}]]')"/>
    </div>
    <script>
        // intoProductPage
        function backProduct(cateid){
            console.log(cateid);
            var str=cateid.split('"');
            location.href="/manage/intoProductPage?cateid="+str[1];
        }
    </script>
</div>
<div th:replace="manageCommon/managebottom"></div>
</body>
</html>